<!DOCTYPE html>
<html>
<head>
    <title>API列表调试</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>API列表调试页面</h1>
        
        <div class="row">
            <div class="col-md-4">
                <h3>API列表</h3>
                <button id="load-api-btn" class="btn btn-primary mb-3">加载API列表</button>
                <div id="api-list-container">
                    <!-- API列表将在这里显示 -->
                </div>
            </div>
            
            <div class="col-md-8">
                <h3>调试信息</h3>
                <div id="debug-info" class="border p-3 bg-light">
                    <p>点击"加载API列表"按钮开始测试</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function log(message) {
            const debugInfo = $('#debug-info');
            const timestamp = new Date().toLocaleTimeString();
            debugInfo.append(`<div class="mb-2"><strong>[${timestamp}]</strong> ${message}</div>`);
        }

        function testLoadApiList() {
            log('开始测试加载API列表...');
            
            $.ajax({
                url: '/api/data',
                method: 'GET',
                data: { per_page: 1000 },
                success: function(response) {
                    log('✅ API列表加载成功');
                    log(`找到 ${response.apis.length} 个API`);
                    
                    if (response.apis.length > 0) {
                        renderApiList(response.apis);
                        log('API列表渲染完成');
                    } else {
                        log('⚠️ 没有找到API数据');
                    }
                },
                error: function(error) {
                    log(`❌ API列表加载失败: ${error.status} ${error.statusText}`);
                    log(`错误详情: ${error.responseText || '无详细信息'}`);
                }
            });
        }

        function renderApiList(apis) {
            const container = $('#api-list-container');
            container.empty();
            
            if (apis.length === 0) {
                container.append('<div class="alert alert-warning">暂无API</div>');
                return;
            }

            // 按分组组织API
            const apiGroups = {};
            apis.forEach(api => {
                const group = api.group || '未分组';
                if (!apiGroups[group]) {
                    apiGroups[group] = [];
                }
                apiGroups[group].push(api);
            });

            // 渲染分组
            Object.keys(apiGroups).sort().forEach(group => {
                const groupCard = $(`
                    <div class="card mb-2">
                        <div class="card-header bg-light">
                            <h6 class="mb-0">${group}</h6>
                        </div>
                        <div class="card-body">
                            <div class="list-group">
                                ${apiGroups[group].map(api => `
                                    <div class="list-group-item">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <span class="badge bg-primary">${api.method}</span>
                                                <span class="ms-2">${api.name}</span>
                                            </div>
                                        </div>
                                        <small class="text-muted">${api.url}</small>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                `);
                container.append(groupCard);
            });
        }

        $(document).ready(function() {
            log('页面加载完成');
            log(`jQuery版本: ${$.fn.jquery}`);
            
            $('#load-api-btn').click(function() {
                $('#debug-info').empty();
                testLoadApiList();
            });
        });
    </script>
</body>
</html>